<template>
	<view>
		<view class="tip">
			填写服务商所在地区
		</view>
		<view class="form">
			<view class="item" @click="showProvince = true">
				<view class="label">选择省/市</view>
				<view class="value">
					<view :class="['text',provinceText ? 'active' : '']">{{provinceText || '选填'}}</view>
					<u-icon name="arrow-right" color="#AAAAAA"></u-icon>
				</view>
			</view>
			<view class="item" @click="choiceCity">
				<view class="label">选择市/区</view>
				<view class="value">
					<view :class="['text',cityText ? 'active' : '']">{{cityText || '选填'}}</view>
					<u-icon name="arrow-right" color="#AAAAAA"></u-icon>
				</view>
			</view>
			<view class="item" @click="choiceArea">
				<view class="label">选择区/县</view>
				<view class="value">
					<view :class="['text',areaText ? 'active' : '']">{{areaText || '选填'}}</view>
					<u-icon name="arrow-right" color="#AAAAAA"></u-icon>
				</view>
			</view>
		</view>
		<view class="btn" @click="submit">
			立即升级
		</view>

		<u-select title="选择省/市" safe-area-inset-bottom :default-value="provinceDefaultValue" confirm-color="#FF3768" v-model="showProvince"
		 :list="provinceList" label-name="areaName" value-name="id" @confirm="provinceConfirm"></u-select>

		<u-select title="选择市/区" safe-area-inset-bottom :default-value="cityDefaultValue" confirm-color="#FF3768" v-model="showCity"
		 :list="cityList" label-name="areaName" value-name="id" @confirm="cityConfirm"></u-select>

		<u-select title="选择区/县" safe-area-inset-bottom :default-value="areaDefaultValue" confirm-color="#FF3768" v-model="showArea"
		 :list="areaList" label-name="areaName" value-name="id" @confirm="areaConfirm"></u-select>
	</view>
</template>

<script>
import {appletImgUrl} from "@/common/config.js"
	import QQMapWX from "@/common/qqmap-wx-jssdk.min";
	let qqmapsdk = ''
	export default {
		data() {
			return {
				appletImgUrl:appletImgUrl,
				showProvince: false,
				showCity: false,
				showArea: false,
				provinceList: [],
				cityList: [],
				provinceText: '',
				provinceDefaultValue: [0],
				cityDefaultValue: [0],
				areaText: '',
				areaDefaultValue: [0],
				cityText: '',
				areaList: []
			}
		},
		onLoad(options) {
			qqmapsdk = new QQMapWX({
				key: 'HQSBZ-EMKE5-6N5IW-QYGDQ-U6EMS-P2BOO'
			});
			let regionList = uni.getStorageSync('regionList'),
				locationPermission = uni.getStorageSync('locationPermission')
			this.regionList = regionList
			this.locationPermission = locationPermission
			this.provinceList = regionList.filter(item => item.level == 1)
			this.level = options.level
			// this.cityList = regionList.filter(item => item.level == 2)
			// this.areaList = regionList.filter(item => item.level == 3)
			if (locationPermission) {
				this.retrievalRegion(locationPermission.latitude, locationPermission.longitude, res => {
					this.mapResponse = res
					console.log(res);
					let provinceIndex = this.provinceList.findIndex(item => item.areaName == res.province)
					this.provinceDefaultValue = [provinceIndex]
				})
			}
		},
		methods: {
			submit() {
				const self = this
				self.$u.post('userservice/upgralLevel', {
					level: self.level,
					activeAreaId: self.activeAreaId || '',
					payChannel: 'MINI_PAY'
				}).then(res => {
					let payStr = JSON.parse(res.payStr)
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: payStr.timeStamp,
						nonceStr: payStr.nonceStr,
						package: payStr.package,
						signType: payStr.signType,
						paySign: payStr.paySign,
						success: function(res) {
							console.log('success:' + JSON.stringify(res));
							uni.showToast({
								title: '支付成功！'
							})

							setTimeout(() => {
								uni.navigateBack()
								var pages = getCurrentPages(); //当前页面栈
								if (pages.length > 1) {
									var beforePage = pages[pages.length - 2]; //获取上一个页面实例对象  
									beforePage.$vm.updateUpgradeList(); //触发父页面中的方法change()  
								}

								self.$u.get('user/info').then(userInfo => {
									if (userInfo.headPhoto) {
										if (userInfo.headPhoto.indexOf("https") != 0) {
											userInfo.headPhoto = self.imageURL + userInfo.headPhoto
										}
									} else {
										userInfo.headPhoto = this.appletImgUrl+'logo.png'
									}
									uni.setStorageSync('userInfo', userInfo)
								})

							}, 1500)
						},
						fail: function(err) {
							uni.showToast({
								title: '支付失败',
								icon: 'none'
							})
						}
					});
				})
			},
			choiceCity() {
				if (this.provinceText) {
					this.showCity = true
				} else {
					uni.showToast({
						title: '请先选择省/市',
						icon: 'none'
					});
					this.showProvince = true
				}
			},
			areaConfirm(e) {
				this.areaText = e[0].label
				this.activeAreaId = e[0].value
			},
			choiceArea() {
				if (this.provinceText) {
					if (this.cityText) {
						this.showArea = true
					} else {
						uni.showToast({
							title: '选择市/区',
							icon: 'none'
						});
						this.showCity = true
					}
				} else {
					uni.showToast({
						title: '请先选择省/市',
						icon: 'none'
					});
					this.showProvince = true
				}
			},
			cityConfirm(e) {
				this.areaList = this.regionList.filter(item => item.level == 3 && item.parentId == e[0].value)
				if (this.locationPermission) {
					let areaIndex = this.areaList.findIndex(item => item.areaName == this.mapResponse.district)
					this.areaDefaultValue = [areaIndex]
				}
				this.cityText = e[0].label
			},
			provinceConfirm(e) {
				if (e[0].label != this.provinceText) {
					this.cityList = []
					this.areaList = []
					this.areaDefaultValue = [0]
					this.cityDefaultValue = [0]
					this.cityText = ''
					this.areaText = ''
				}
				this.cityList = this.regionList.filter(item => item.level == 2 && item.parentId == e[0].value)
				if (this.locationPermission) {
					let cityIndex = this.cityList.findIndex(item => item.areaName == this.mapResponse.city)
					this.cityDefaultValue = [cityIndex]
				}
				this.provinceText = e[0].label
			},
			retrievalRegion(latitude, longitude, successCallBack) {
				const self = this
				qqmapsdk.reverseGeocoder({
					location: {
						longitude: longitude, //经度
						latitude: latitude //纬度
					},
					success(res) {
						if (res.status == 0) {
							let {
								result
							} = res, {
								address_component
							} = result
							successCallBack(address_component)
						} else {
							uni.showToast({
								title: res.message,
								icon: 'none'
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;

		.btn {
			line-height: 100rpx;
			text-align: center;
			font-size: 30rpx;
			color: #fff;
			margin: 0 30rpx;
			margin-top: 110rpx;
			background: linear-gradient(90deg, #FF3768, #FC6161);
			box-shadow: 0px 10rpx 14rpx 2rpx rgba(255, 77, 70, 0.3);
			border-radius: 20rpx;
		}

		.form {
			background-color: #fff;
			margin: 0 30rpx;
			border-radius: 20rpx;

			.item {
				display: flex;
				padding: 0 30rpx;
				height: 100rpx;
				align-items: center;
				justify-content: space-between;
				border-bottom: 1rpx solid #F2F2F2;

				&:last-child {
					border-bottom: none;
				}

				.value {
					display: flex;
					text-align: right;
					align-items: center;

					.text {
						color: #aaa;

						&.active {
							color: #000;
						}
					}
				}
			}
		}

		.tip {
			padding: 20rpx 30rpx;
		}
	}
</style>
